Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhancement: console.warn when no label is provided #12 #122

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

tgfbikes
Copy link

@tgfbikes tgfbikes commented Feb 6, 2018

This is an enhancement (idea from @aaronshaf) that will give a warning in the console if the developer does not provide standard label implementation, such as wrapping react-toggle component in a label, providing a label with a 'for' attribute that matches an id prop for a react-toggle component, etc.

Changes to the react-toggle component:

  • Added second ref to the root div (line 143).

    • The reference is needed to check for any ancestors that are labels, i.e. the case where a developer would wrap a react-toggle component in a label. How this check is performed is described below.
  • Added componentDidMount life cycle method (line 30).

    • Need access to both refs and since componentDidMount will only run once, costly operations (like recursively checking for a parent that's a label) are only performed once and not on a re-render/prop change.

Added utils:

  • checkForLabel

    • Takes react-toggle container div element and input element as arguments. Performs three checks to see if there is any associated label. Returns true if there is some sort of a label or will give the console warning.
  • hasParentLabel

    • Recursively climbs through parentNodes of elements (starting on the react-toggle container div parent) looking for a tagName prop equal to 'LABEL'. Returns true parentNode with a tagName of 'LABEL' or false otherwise.
    • CONCERN - This is a potentially costly operation, especially if there isn't a parent node that's a label and if the react-toggle component is deeply nested in the DOM.
  • hasIdThatMatchesLabelFor

    • Checks the case of a label having a 'htmlFor' attribute that matches a react-toggle input id. Returns true if a label's htmlfor attr matches the input's id, otherwise false.
  • hasArialLabelOrAriaLabelledbyAttr

    • Checks the react-toggle input element for either an aria-label or an aria-labelledby attribute. Returns true if the input does have either, otherwise false.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant